<template>
    <a-card title="小程序参数配置" :bordered="false">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="小程序名称" prop="name" ref="name">
                <a-input v-model="form.name"
                         :placeholder="placeholder.name"
                         :size="inputSize"
                         @blur=" () => { $refs.name.onFieldBlur(); } "/>
            </a-form-model-item>
            <a-form-model-item label="AppID" prop="appId" ref="appId">
                <a-input v-model="form.appId"
                         :placeholder="placeholder.appId"
                         :size="inputSize"
                         @blur=" () => { $refs.appId.onFieldBlur(); } "/>
            </a-form-model-item>


            <a-form-model-item label="AppSecret" prop="secret" ref="secret">
                <a-input v-model="form.secret"
                         :placeholder="placeholder.secret"
                         :size="inputSize"
                         @blur=" () => { $refs.secret.onFieldBlur(); } "/>
            </a-form-model-item>

            <a-form-model-item label="消息推送" prop="callBack" ref="callBack">
                <a-switch  checked-children="开启"
                           un-checked-children="关闭"
                           :checked="form.callBack === 'T'"  @change="onChangeSwitch" />
            </a-form-model-item>


            <div v-if="form.callBack === 'T'">
                <a-form-model-item label="Token(令牌)" prop="token" ref="token">
                    <a-input v-model="form.token"
                             :placeholder="placeholder.token"
                             :size="inputSize"
                             @blur=" () => { $refs.token.onFieldBlur(); } "/>
                </a-form-model-item>

                <a-form-model-item label="EncodingAESKey" prop="aesKey" ref="aesKey">
                    <a-input v-model="form.aesKey"
                             :placeholder="placeholder.aesKey"
                             :size="inputSize"
                             @blur=" () => { $refs.aesKey.onFieldBlur(); } "/>
                </a-form-model-item>
            </div>



            <a-form-model-item label="小程序码" prop="qrcode" ref="qrcode">
                <a-upload
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                        :customRequest="customRequest"
                >
                    <img v-if="form.qrcode" :src="form.qrcode" class="qrcodeImg" alt="小程序码"/>
                    <div v-else>
                        <a-icon :type="loading ? 'loading' : 'plus'"/>
                        <div class="ant-upload-text">小程序码</div>
                    </div>
                </a-upload>
            </a-form-model-item>
            <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: right">
                <a-button type="primary" @click="onSubmit">
                    保存配置
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </a-card>
</template>
<script>
    import {fileUpload} from '../../../../../util/internal.api'
    import {AddWeixinAppConfig, UpdateWeixinAppConfig, FindWeixinAppConfig} from '../../public/http'

    export default {
        data() {
            return {
                loading: false,
                isUpdate: false,
                inputSize: "default",
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 18
                },
                form: {
                    name: null,
                    appId: null,
                    secret: null,
                    aesKey: null,
                    callBack:"F",
                    qrcode: ""
                },
                placeholder: {
                    name: "请填写小程序名称",
                    qrcode: "请上传小程序官网二维码",
                    appId: "请填写小程序AppID",
                    secret: "请填写小程序AppSecret",
                    aesKey: "请填写小程序的EncodingAESKey",
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请填写小程序名称',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '小程序名称请设置在10个字以内',
                            trigger: 'blur'
                        },
                    ],
                    appId: {
                        required: true,
                        message: '请设置微信小程序appId',
                        trigger: 'blur'
                    },
                    secret: {
                        required: true,
                        message: '请设置微信小程序的secret',
                        trigger: 'blur'
                    },
                    aesKey: {
                        required: true,
                        message: '请填写小程序生成的EncodingAESKey',
                        trigger: 'blur'
                    },
                    qrcode: [{
                        required: true,
                        message: '请上传一张小程序的官方二维码',
                        trigger: 'blur'
                    }],
                },
            };
        },
        methods: {
            onChangeSwitch(e) {
                if (e) {
                    this.form.callBack = "T";
                } else {
                    this.form.callBack = "F";
                }
            },
            async onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    if (this.isUpdate) {
                        UpdateWeixinAppConfig(this.form.id, this.form).then(res => {
                            this.$exMod.ajaxMessage(res)
                            if (res.code === 0) {
                                this.readConfig();
                            }
                        });
                    } else {
                        //新增
                        AddWeixinAppConfig(this.form).then(res => {
                            this.$exMod.ajaxMessage(res)
                            if (res.code === 0) {
                                this.readConfig();
                            }
                        });
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
            //===========upload================
            //自定义上传方法
            customRequest(e) {
                //值要data里面的file对象 其他对象不要了
                // formData.append('参数名称', "参数值")
                const formData = new FormData();
                formData.append('file', e.file)
                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.qrcode = res.data.url;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {
                console.log(info);
                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },


            readConfig() {
                FindWeixinAppConfig().then(res => {
                    if (res.code === 0) {
                        this.isUpdate = true;
                        this.form = {...res.data.result}
                    } else {
                        this.isUpdate = false;
                        this.$message.error('当前站点尚未进行微信小程序的参数配置 请登录微信公众平台获取配置参数');
                    }
                })
            }
        },
        created() {
            this.readConfig();
        }
    };
</script>
<style>
    .qrcodeImg {
        width: 150px;
        height: 150px;
        overflow: hidden;
    }

    .avatar-uploader > .ant-upload {
        width: 150px;
        height: 150px;
    }

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .ant-form-item {
        margin-bottom: 20px;
    }
</style>
